window.onload = function () {
    // 获取  class="leixing1"
    let leixing1 = document.getElementsByClassName("leixing1")[0]

    // 获取展示图       class="shangpindivimg"
    let shangpindivimg = document.getElementsByClassName("shangpindivimg")[0];
    // 获取展示图右边    class="shangpindivjieshao"
    let shangpindivjieshao = document.getElementsByClassName("shangpindivjieshao")[0];


    $.ajax({
        type: "post",
        url: "/js/huixianshangpin",
        data: null,
        dataType: "json",
        success: function (data) {
            let s0 = ""
            let s1 = "";
            let s2 = "";
            id = data[0].id;
            teaName = data[0].teaName;
            let arr = ["绿茶", "黄茶", "乌龙茶", "红茶", "黑茶", "白茶", "花茶"]
            teaType = data[0].teaType;
            teaPrice = data[0].teaPrice;
            teaImg = data[0].teaImg;
            s0 += `<span><a href="../html/茶叶.html">茶叶</a></span><span>></span><span><a href="../html/茶叶.html">全部</a></span><span>></span><span>${arr[teaType]}</span><span>></span><span>${teaName}</span>`

            s1 += `<div class="shangpindivimg-img"><img src="../img/${teaImg}" alt=""></div>`
            s1 += `<div class="shangpindivimg-img-bottom"><img src="../img/${teaImg}"></div>`

            s2 += `<div class="shangpindivjieshao-name">${teaName}</div>`
            s2 += `<div class="shangpindivjieshao-gang"></div>`
            s2 += `<div class="shangpindivjieshao-price">￥${teaPrice}</div>`
            s2 += `<div class="shangpindivjieshao-title">饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。</div>`
            s2 += `<div class="shangpindivjieshao-type">分类：${arr[teaType]}</div>`
            s2 += `<div class="shangpindivjieshao-gwc">`
            s2 += `<div class="shangpindivjieshao-gwc-jrgwc">`
            s2 += `<div class="shangpindivjieshao-gwc-jrgwc-left" onclick="jrgwc(${id})">加入购物车</div>`
            s2 += `<div class="shangpindivjieshao-gwc-jrgwc-right"><input type="button" value="-" onclick="jian()"><input type="text" value="1" id="zhi"><input type="button" value="+" onclick="jia()"></div>`
            s2 += `</div></div><div class="shangpindivjieshao-shoucang"><span>收藏</span></div>`

            leixing1.innerHTML = s0
            shangpindivimg.innerHTML = s1;
            shangpindivjieshao.innerHTML = s2;

            let obj = {
                teaName: teaName,
                teaType: teaType
            }
            let xiangguan = document.getElementsByClassName("xiangguan")[0]
            $.ajax({
                type: "post",
                url: "/js/huixianshangpin1",
                data: JSON.stringify(obj),
                dataType: "json",
                success: function (data) {
                    let s = ""
                    for (let i = 0; i < data.length; i++) {
                        id = data[i].id;
                        teaName = data[i].teaName;
                        teaType = data[i].teaType;
                        teaPrice = data[i].teaPrice;
                        teaImg = data[i].teaImg;
                        s += `<div class="xiangguan-list1-img"><img src="../img/${teaImg}" alt=""></div>`
                        s += `<div class="xiangguan-list1-title"><div class="xiangguan-list1-title-name">${teaName}</div><div class="xiangguan-list1-title-price">￥${teaPrice}</div></div>`
                    }

                    xiangguan.innerHTML = s
                }
            })
        }
    })
}

function jian() {
    let zhi = document.getElementById("zhi").value;
    document.getElementById("zhi").value = --zhi
    if (zhi < 1) {
        document.getElementById("zhi").value = 1;
    }
}
function jia() {
    let zhi = document.getElementById("zhi").value;
    document.getElementById("zhi").value = ++zhi
}

function jrgwc(id) {
    // console.log(id);
    // 获取数量
    let num = document.getElementById("zhi").value;
    let obj = {
        id:id,
        num:num
    }
    $.ajax({
        type:"post",
        url:"/js/jrgwc",
        data:JSON.stringify(obj),
        dataType:"json",
        success:function(data){
            if(data){
                alert("已添加到购物车")
            }else{
                alert("购物车中已存在")
            }
        }
    })
}